<ion-view title="{{currCategory.title}}">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon ion-navicon"></button>
  </ion-nav-buttons>

  <ion-nav-buttons side="right">
    <button class="button button-icon ion-ios7-plus-empty" 
      ng-click="addNote()" ></button>
    <button class="button button-icon ion-ios7-search" 
      ng-click="searchNote()" ></button>
    <button class="button button-icon ion-ios7-more"
            ns-popover
            ns-popover-template="moreMenu"
            ns-popover-trigger="click"
            ns-popover-theme="ns-popover-list-theme"
            ns-popover-placement="bottom|right"
            ns-popover-timeout="2" ></button>
  </ion-nav-buttons>

  <ion-content class="has-header">

    <div class="list" ng-show="!currCategories.length">
      <div class="row">
        <div class="col col-offset-33">暂时还没有笔记！</div>
      </div>
    </div>

    <div class="list" ng-show="currCategories.length"
        ng-repeat="category in currCategories">
      <div class="item item-divider">
        {{category.title}}
      </div>
      <div class="item item-list" 
        ng-repeat="note in category.notelist" 
        ng-click="showNote({{note.id}})"
        ng-show="category.notelist.length"
        ng-class="{'item-checkbox':doDelete}">
        <label class="checkbox {{note.classname}}" 
          ng-show="doDelete">
          <input type="checkbox" ion-stop-event ng-click="finish({{note.id}}, $event);" ng-model="note.selected" />
        </label>
        {{note.title | limitTo:12}} <span class="badge">{{note.date | displayDate}}</span>
      </div>
    </div>
  </ion-content>

  <ion-footer-bar class="bar-stable">
    <div class="tabs tabs-icon-top">
      <a class="tab-item active" ng-show="!doDelete">
        <i class="icon ion-calendar"></i>
        所有记事
      </a>
      <a class="tab-item" ng-show="!doDelete">
        <i class="icon ion-star"></i>
        重要记事
      </a>
      <a class="tab-item" ng-show="!doDelete">
        <i class="icon ion-gear-a"></i>
        设置
      </a>


      <a class="tab-item" 
        ng-click="toggleSelect(isSelectAll)"        
        ng-show="doDelete">
        <i class="icon" ng-class="{'ion-ios7-circle-outline':isSelectAll, 'ion-ios7-circle-filled':!isSelectAll}"></i>
        全选
      </a>
      <a class="tab-item" ng-click="deleteNotes()"
        ng-show="doDelete">
        <i class="icon ion-ios7-trash-outline"></i>
        删除
      </a>
      <a class="tab-item " ng-click="cancelDelete()"
        ng-show="doDelete">
        <i class="icon ion-ios7-minus-outline"></i>
        取消
      </a>
    </div>
  </ion-footer-bar>
</ion-view>

<script type="text/ng-template" id="moreMenu">
  <div class="triangle"></div>
  <div class="ns-popover-tooltip" style="width:140px;">
    <div class="list" style="margin-top:0;margin-bottom:0;">
      <a class="item" ng-click="hidePopover();sort();"> 排序 </a>
      <a class="item" ng-click="hidePopover();search();"> 显示模式 </a>
    </div>
  </div>
</script>